<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2018/7/12
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script>
        $(function () {
            var  chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: "日常支出列表"
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '浏览器访问量占比',
                    data: [
                        ['聚餐费',${payClass6}],
                        ['维修费', ${payClass2}],
                        {
                            name: '采购费',
                            y: ${payClass1},
                            sliced: true, // 突出显示这个点（扇区），用于强调。
                        },
                        ['物业费',  ${payClass3}],
                        ['水电费',  ${payClass4}],
                        ['快递费',  ${payClass5}]
                    ]
                }]
            });
        })

    </script>
</head>
<body style="background-color: #f0f0f0">
<%--<h6 style="color: green">会员信息统计</h6>--%>
<div style="width: 100%;height: 140px">

    <div style="float: left; background-color: white; width: 20%; height: 120px">
        <div style="padding-top: 10px; padding-left: 10px">分类总数</div>
        <div style="padding-top: 15px; text-align: center; font-size: 30px">6个</div>
    </div>

    <div style="float: left; background-color: white; width: 20%; height: 120px; margin-left: 10px">
        <div style="padding-top: 10px; padding-left: 10px">总花费</div>
        <div style="padding-top: 15px; text-align: center; font-size: 14px; color: red"><span style="font-size: 30px">${allAmount}元</span></div>
    </div>


</div>

<br>
<div>
    <div>

        <div id="container" style="background-color: white; width: 100%; height: 76%; float: left">

        </div>
    </div>
</div>


</body>
</html>
